import Vue from 'vue'
import Component from 'vue-class-component'
import { Indicator } from 'mint-ui'

@Component
export default class BrandSelectClass extends Vue {
  datas = []
  lettersArr = {}
  keys = []
  selectItem = []
  type = ''

  created () {
    this.datas = this.$store.getters.allDesigners
    this.lettersArr = this.designerLetters()
    for (var key in this.lettersArr) {
      if (this.lettersArr[key].length > 0) {
        this.keys.push(key)
      }
    }
  }

  mounted() {

  }

  designerLetters () {
    let letters = {}// new Map()
    letters['#'] = []
    for (let i = 0; i < 26; i++) {
      let letter = String.fromCharCode(65 + i)
      letters[letter] = []
    }

    let numberDesigners = []
    let designerList = this.datas
    for (let designer of designerList) {
      let firstChar = designer.name.substring(0, 1).toUpperCase()
      let letterDesigners = letters[firstChar]
      if (letterDesigners instanceof Array) {
        letterDesigners.push(designer)
      } else {
        numberDesigners.push(designer)
      }
    }
    if (numberDesigners.length > 0) {
      letters['#'] = numberDesigners
    }
    return letters
  }

  handlerClickCell(value) {
    let item = value
    this.$router.beforeEach((to, from, next) => {
      if (to.name === 'productAdd' && from.name === 'brandSelect') {
        to.query.temp = item
      }
      if (to.name === 'wantBuyAdd' && from.name === 'brandSelect') {
        to.query.temp = item
      }
      if (to.name === 'productEdit' && from.name === 'brandSelect') {
        to.query.temp = item
      }
      next()
    })
    this.$router.go(-1)
  }

  createItems (items) {
    const item = items.map(value => {
      return <div onClick={ () => this.handlerClickCell(value)}>
              <mt-cell title={value.name}>
                <icon name='rightArrow' scale = '1.5'/>
              </mt-cell>
            </div>
    })
    return item
  }

  createSectionItem () {
    const item = this.keys.map(value => {
      return <mt-index-section index={value}>
              { this.createItems(this.lettersArr[value])}
          </mt-index-section>
    })
    return item
  }

  render () {
    return (
      <div class='content'>
        <mt-header class='header' fixed title="品牌列表">
        <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>

      <mt-index-list style='margin-top:56px'>
        {this.createSectionItem()}
      </mt-index-list>

      </div>
    )
  }
}
